import React, { PureComponent } from 'react';

// 引入影视样式
import './scss/Movies.scss';
// 引入样式
import { Button, Carousel, message } from 'antd';
// 引入请求
import Axios from 'axios';
// 引入地址
import { webSite } from '../website';
import {
  PlayCircleOutlined,
  SyncOutlined
} from '@ant-design/icons';
// 加载图
let lazyloadObj = { CarouselImg: require('./image/lazyload.gif') };
let lazyload = [];
for (let index = 0; index < 6; index++) {
  lazyload.push(lazyloadObj);
}
// 长列表加载图
let lazyLoadAll = [];
for (let index = 0; index < 30; index++) {
  lazyLoadAll.push(lazyloadObj)
}
export default class Movies extends PureComponent {
  constructor() {
    super()
    this.state = {
      // 选项卡
      indexTap: 1,
      // 当前的下标
      int: 0,
      // 电影列表
      FilmAll: lazyload,
      // 电影多选框的下标
      FilmIndex: 0,
      // 电影的列表多个
      FilmObjAll: lazyLoadAll,
      // 电视剧列表
      TVPlayAll: lazyload,
      // 电视剧多选框的下标
      TVPlayIndex: 0,
      // 电视剧的列表多个
      TVPlayObjAll: lazyLoadAll
    }
  }

  componentWillUnmount () {
    // 卸载异步操作设置状态
    this.setState = (state, callback) => {
      return;
    }
  }

  // 网页加载执行
  componentDidMount () {
    // 获取电影数据
    this.getFilm()
    // 获取电视剧数据
    this.getTVPlay()
  }

  // 电影请求
  getFilm = () => {
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/getStart", { type: 'movie' }).then(err => {
      if (err.data.code === 'G0001') {
        let all = err.data.All;
        if (all.length === 0) {
          return;
        }
        let FilmAll = [];
        for (let index = 0; index < 6; index++) {
          if (all.length > 0) {
            let n = Math.floor(Math.random() * all.length) //随机抽取的索引值
            FilmAll.push(all.splice(n, 1)[0]) //在把删除的值放入被删数组
          }
        }
        this.setState({
          FilmAll,
          FilmObjAll: all
        })
      }
    }).catch(() => {
      message.error({ content: '网络错误', className: 'bulletChatMessage' });
    })
  }

  // 电视剧请求
  getTVPlay = () => {
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/getStart", { type: 'tv' }).then(err => {
      if (err.data.code === 'G0001') {
        let all = err.data.All;
        if (all.length === 0) {
          return;
        }
        let TVPlayAll = [];
        for (let index = 0; index < 6; index++) {
          if (all.length > 0) {
            let n = Math.floor(Math.random() * all.length) //随机抽取的索引值
            TVPlayAll.push(all.splice(n, 1)[0]) //在把删除的值放入被删数组
          }
        }
        this.setState({
          TVPlayAll,
          TVPlayObjAll: all
        })
      }
    }).catch(() => {
      message.error({ content: '网络错误', className: 'bulletChatMessage' });
    })
  }

  // 切换选项卡
  tapClass = (int) => {
    this.setState({
      int
    })
  }

  // 换一个
  getSync = (int) => {
    switch (int) {
      case 1:
        this.getFilm()
        break;
      case 2:
        this.getTVPlay()
        break;

      default:
        break;
    }
  }

  // 内容之间的切换
  tapContext = () => {
    let { int } = this.state;
    switch (int) {
      case 0:
        return this.selected();
      case 1:
        return this.film();
      case 2:
        return this.TVPlay();

      default:
        return this.selected();
    }
  }

  // 精选
  selected = () => {
    let { FilmAll, TVPlayAll } = this.state;
    // 设置一个跟随页面变化的高度
    let CarouselHeight = document.getElementsByClassName('CarouselSelectedBox')[0];
    let Cheight = CarouselHeight !== undefined ? CarouselHeight.offsetHeight : 180;
    const contentStyle = {
      height: `${Cheight}px`,
      color: '#fff',
      lineHeight: `${Cheight}px`,
      textAlign: 'center',
      background: '#409890'
    };
    return (
      <div className='selected'>
        {/* 首页轮播图 */}
        <div className='CarouselSelectedBox'>
          <Carousel className='CarouselSelected' autoplay>
            <div>
              <h3 style={contentStyle} className='selectedCarousel' onClick={() => this.GoFilmPlay({ CarouselText: '妙先生', CarouselUrl: 'https://www.iqiyi.com/v_19rv6mez7s.html?src=focustext_1_20130410_3' })}>
                <div className='selectedCarouselImg' style={{ background: 'url("https://pic1.iqiyipic.com/common/lego/20200806/5c688d42afe843c6922b1ef94c67f949.webp?src=focustat_1_20130410_3")' }}></div>
                <div className='selectedCarouselTitle'>暗黑国漫引发善恶抉择</div>
              </h3>
            </div>
            <div>
              <h3 style={contentStyle} className='selectedCarousel' onClick={() => this.GoFilmPlay({ CarouselText: '哥斯拉2:怪兽之王', CarouselUrl: 'https://www.iqiyi.com/v_19rr7q5ado.html?src=focustext_1_20130410_6' })}>
                <div className='selectedCarouselImg' style={{ background: 'url("https://pic0.iqiyipic.com/common/lego/20200728/994e6e2f69d7465f8ac8f359fc5da87b.webp?src=focustat_1_20130410_6")' }}></div>
                <div className='selectedCarouselTitle'>哥斯拉2:怪兽之王</div>
              </h3>
            </div>
            <div>
              <h3 style={contentStyle} className='selectedCarousel' onClick={() => this.GoFilmPlay({ CarouselText: '征途', CarouselUrl: 'https://www.iqiyi.com/v_19rs76de1g.html?src=focustext_1_20130410_7' })}>
                <div className='selectedCarouselImg' style={{ background: 'url("https://pic0.iqiyipic.com/common/lego/20200723/9ad43863211f452a86ec379695018bf5.webp?src=focustat_1_20130410_7")' }}></div>
                <div className='selectedCarouselTitle'>刘宪华何润东血拼中原</div>
              </h3>
            </div>
            <div>
              <h3 style={contentStyle} className='selectedCarousel' onClick={() => this.GoFilmPlay({ CarouselText: '大幻术师', CarouselUrl: 'https://www.iqiyi.com/v_2ffkwtgnur4.html?src=focustext_1_20130410_4' })}>
                <div className='selectedCarouselImg' style={{ background: 'url("https://pic1.iqiyipic.com/common/lego/20200805/22e24ed40444420cb7625c59b7a9ce24.webp?src=focustat_1_20130410_4")' }}></div>
                <div className='selectedCarouselTitle'>幻术大师斗法东瀛妖女</div>
              </h3>
            </div>
            <div>
              <h3 style={contentStyle} className='selectedCarousel' onClick={() => this.GoFilmPlay({ CarouselText: '绝杀危城', CarouselUrl: 'https://www.iqiyi.com/v_19rz471lms.html?src=focustext_1_20130410_2' })}>
                <div className='selectedCarouselImg' style={{ background: 'url("https://pic2.iqiyipic.com/common/lego/20200809/af03e4a69c634935839a62f722275a0e.webp?src=focustat_1_20130410_2")' }}></div>
                <div className='selectedCarouselTitle'>天魔大战食人蛮夷</div>
              </h3>
            </div>
          </Carousel>
        </div>

        {/* 电影展示 */}
        <div className='selectedFilmBody'>
          <h3>电影</h3>
          <ul className='selectedFilmBodyUl'>
            {
              FilmAll.length !== 0 ?
                FilmAll.map((list, index) => {
                  return (
                    <li key={index} onClick={() => this.GoFilmPlay(list)}>
                      <img src={list.CarouselImg} alt={list.CarouselText} />
                      <p>{list.CarouselText}</p>
                    </li>
                  )
                })
                : ''
            }
          </ul>
          <div className='selectedFilmBodycaozuo'>
            <div onClick={() => this.tapClass(1)}>
              <PlayCircleOutlined className='selectedFilmBodySize' />更多电影
            </div>
            <div onClick={() => this.getSync(1)} >
              <SyncOutlined className='selectedFilmBodySize' />换一批
            </div>
          </div>
        </div>

        {/* 电视剧展示 */}
        <div className='selectedFilmBody'>
          <h3>电视剧</h3>
          <ul className='selectedFilmBodyUl'>
            {
              TVPlayAll.length !== 0 ?
                TVPlayAll.map((list, index) => {
                  return (
                    <li key={index} onClick={() => this.GoTVPlay(list)}>
                      <img src={list.CarouselImg} alt={list.CarouselText} />
                      <p>{list.CarouselText}</p>
                    </li>
                  )
                })
                : ''
            }
          </ul>
          <div className='selectedFilmBodycaozuo'>
            <div onClick={() => this.tapClass(2)}>
              <PlayCircleOutlined className='selectedFilmBodySize' />更多电视剧
            </div>
            <div onClick={() => this.getSync(2)} >
              <SyncOutlined className='selectedFilmBodySize' />换一批
            </div>
          </div>
        </div>
      </div>
    )
  }

  // 改变电影页面的样式
  FilmClass = (int) => {
    this.setState({
      FilmIndex: int
    }, () => {
      this.getFilmAllType(int);
    })
  }

  // 调用数据
  getFilmAllType = (int) => {
    let type = 0;
    switch (int) {
      case 0:
        type = -1;
        break;
      case 1:
        type = 100018;
        break;
      case 2:
        type = 100004;
        break;
      case 3:
        type = 100061;
        break;
      case 4:
        type = 100005;
        break;
      case 5:
        type = 100010;
        break;
      case 6:
        type = 4;
        break;
      case 7:
        type = 100009;
        break;
      case 8:
        type = 100006;
        break;
      case 9:
        type = 100012;
        break;

      default:
        break;
    }
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/getStartAll", { type }).then(err => {
      if (err.data.code === 'G0001') {
        this.setState({
          FilmObjAll: err.data.All
        })
      }
    }).catch(() => {
      message.error({ content: '网络错误', className: 'bulletChatMessage' });
    })
  }

  // 跳转到电影播放页面
  GoFilmPlay = (list) => {
    if (!list.CarouselUrl) {
      return;
    }
    this.props.history.push({ pathname: "/Movies/FilmPlay", state: { url: list.CarouselUrl, title: list.CarouselText } });
  }

  // 电影
  film = () => {
    let { FilmIndex, FilmObjAll } = this.state;
    let filmStr = ['全部', '剧情', '喜剧', '动作', '爱情', '惊悚', '犯罪', '悬疑', '战争', '科幻'];
    return (
      <div className='film'>
        <ul className='filmCz'>
          <li className='filmCzType'>类型</li>
          {
            filmStr.map((list, index) => {
              return (
                <li className={FilmIndex === index ? 'active' : ''} onClick={() => this.FilmClass(index)} key={index}>{list}</li>
              )
            })
          }
        </ul>
        <ul className='filmBody'>
          {
            FilmObjAll.length !== 0 ?
              FilmObjAll.map((list, index) => {
                return (
                  <li className='filmBodyLi' key={index} onClick={() => this.GoFilmPlay(list)}>
                    <img src={list.CarouselImg} alt={list.CarouselText} />
                    <p>{list.CarouselText}</p>
                  </li>
                )
              })
              : ''
          }
        </ul>
      </div>
    )
  }

  // 跳转到电视剧页面
  GoTVPlay = (list) => {
    if (!list.CarouselUrl) {
      return;
    }
    this.props.history.push({ pathname: "/Movies/TVPlay", state: { url: list.CarouselUrl, title: list.CarouselText, index: 0, transformation: false } });
  }

  // 改变电影页面的样式
  TVPlayClass = (int) => {
    this.setState({
      TVPlayIndex: int
    }, () => {
      this.getTVPlayType(int);
    })
  }

  // 调用数据
  getTVPlayType = (int) => {
    let type = 0;
    switch (int) {
      case 0:
        type = -1;
        break;
      case 1:
        type = 1;
        break;
      case 2:
        type = 2;
        break;
      case 3:
        type = 3;
        break;
      case 4:
        type = 4;
        break;
      case 5:
        type = 14;
        break;
      case 6:
        type = 5;
        break;
      case 7:
        type = 6;
        break;
      case 8:
        type = 7;
        break;
      case 9:
        type = 8;
        break;

      default:
        break;
    }
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/getStartAllTv", { type }).then(err => {
      if (err.data.code === 'G0001') {
        this.setState({
          TVPlayObjAll: err.data.All
        })
      }
    }).catch(() => {
      message.error({ content: '网络错误', className: 'bulletChatMessage' });
    })
  }

  // 电视剧
  TVPlay = () => {
    let { TVPlayIndex, TVPlayObjAll } = this.state;
    let filmStr = ['全部内容', '偶像爱情', '古装历史', '玄幻史诗', '都市生活', '当代旋律', '犯罪谍战', '历险科幻', '军旅抗战', '喜剧剧情'];
    return (
      <div className='film'>
        <ul className='filmCz' style={{ height: '25vw' }}>
          <li className='filmCzType' style={{ lineHeight: '18vw' }}>类型</li>
          {
            filmStr.map((list, index) => {
              return (
                <li className={TVPlayIndex === index ? 'active' : ''} onClick={() => this.TVPlayClass(index)} key={index} style={{ lineHeight: '4vw' }}>{list}</li>
              )
            })
          }
        </ul>
        <ul className='filmBody'>
          {
            TVPlayObjAll.length !== 0 ?
              TVPlayObjAll.map((list, index) => {
                return (
                  <li className='filmBodyLi' key={index} onClick={() => this.GoTVPlay(list)}>
                    <img src={list.CarouselImg} alt={list.CarouselText} />
                    <p>{list.CarouselText}</p>
                  </li>
                )
              })
              : ''
          }
        </ul>
      </div>
    )
  }

  // 跳转到搜索页面
  goSearch = () => {
    this.props.history.replace('/Movies/Search')
  }

  // 点击图标跳转到本地
  goMoviesHome = () => {
    this.props.history.replace('/Movies')
  }

  render () {
    let { int } = this.state;
    let tab = ['精选', '电影', '电视剧'];
    return (
      <div className='Movies'>
        <div className='MoviesHeader'>
          {/* 顶部logo */}
          <div className='MoviesHeader_logo'>
            <img src={require('./image/tv.png')} alt="logo" onClick={this.goMoviesHome} />
          </div>
          <div className='MoviesHeader_search'>
            <Button className='MoviesHeaderViesInput' type='text' onClick={this.goSearch}>输入你想看的</Button>
          </div>
          <div className='MoviesHeader_bottom'>
            <Button type='text' className='MoviesHeader_bottom_body' onClick={this.goSearch}>全网搜索</Button>
          </div>
        </div>
        {/* 选项卡 */}
        <ul className='MoviesTab'>
          {
            tab.map((list, index) => {
              return (
                <li className={int === index ? 'borderColor' : ''} onClick={() => this.tapClass(index)} key={index}>
                  {list}
                  {int === index ? <em className='border'></em> : ''}
                </li>
              )
            })
          }
        </ul>
        {/* 内容 */}
        <div className='MoviesBody'>
          {
            this.tapContext()
          }
        </div>
      </div>
    )
  }
}